<template>
    <div class="app-container">
        <div>
            <h3>基本信息</h3>
            <el-form ref="rescueApplyOrder" :model="rescueApplyOrder" label-width="120px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="申请单号:">
                            <span>{{rescueApplyOrder.id}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="会员名称:">
                            <span>{{rescueApplyOrder.applyUserName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号码:">
                            <span>{{rescueApplyOrder.applyPhone}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请时间:">
                            <span>{{rescueApplyOrder.applyDate}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="救援状态:">
                            <span>{{rescueApplyOrder.rescueStatusName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="垫付状态:">
                            <span>{{rescueApplyOrder.returnStatusName}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审批意见:">
                            <span>{{rescueApplyOrder.approveComments}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="垫付金额:">
                            <span>{{rescueApplyOrder.rescueAmount}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="还款金额:">
                            <span>{{rescueApplyOrder.returnAmount}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="豁免金额:">
                            <span>{{rescueApplyOrder.exemptionAmount}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div>
            <h3>图片信息</h3>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="事故认定书" name="1" v-if="accidentConfirmation.length>0">
                    <div  class="image_div">
                        <div class="image_item" v-for="image in accidentConfirmation" :key="image.id" @click="showImg(image.imageUrl)">
                            <img :src="baseUrl+image.imageUrl">
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="医生诊断书" name="2" v-if="medicalCertificate.length>0">
                    <div  class="image_div">
                        <div class="image_item" v-for="image in medicalCertificate" :key="image.id" @click="showImg(image.imageUrl)">
                            <img :src="baseUrl+image.imageUrl">
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="垫付凭证" name="3" v-if="advancesVouchers.length>0">
                    <div  class="image_div">
                        <div class="image_item" v-for="image in advancesVouchers" :key="image.id" @click="showImg(image.imageUrl)">
                            <img :src="baseUrl+image.imageUrl">
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="还款凭证" name="4" v-if="paymentVoucher.length>0">
                    <div  class="image_div">
                        <div class="image_item" v-for="image in paymentVoucher" :key="image.id" @click="showImg(image.imageUrl)">
                            <img :src="baseUrl+image.imageUrl">
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="豁免凭证" name="5" v-if="negativeClearance.length>0">
                    <div  class="image_div">
                        <div class="image_item" v-for="image in negativeClearance" :key="image.id" @click="showImg(image.imageUrl)">
                            <img :src="baseUrl+image.imageUrl">
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <el-dialog title="查看图片" :visible.sync="dialogImgFormVisible" top="10vh">
                <div class="viewImg">
                    <img :src="imgUrl" style="width:100%;height: auto">
                </div>
            </el-dialog>
        </div>
        <div>
            <h3>操作记录</h3>
            <el-table
                    :data="logList"
                    style="width: 100%">
                <el-table-column
                        prop="optDate"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="optUserName"
                        label="操作姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="optName"
                        label="操作名称">
                </el-table-column>
                <el-table-column
                        prop="statusName"
                        label="状态">
                </el-table-column>
            </el-table>

        </div>
        <div class="btn_panel">
            <el-button @click="checkApprove('Y')" v-if="rescueApplyOrder.rescueStatusId==='10'" type="success" style="width: 100px;">审核通过</el-button>
            <el-button @click="checkApprove('N')" v-if="rescueApplyOrder.rescueStatusId==='10'" type="danger" style="width: 100px;">驳回</el-button>
            <el-button @click="checkApprove('R')" v-if="rescueApplyOrder.rescueStatusId==='10'" type="primary" style="width: 100px;">返回修改</el-button>
            <el-button @click="voucherInput('ZF')" v-if="rescueApplyOrder.rescueStatusId==='30'" type="success" style="width: 100px;">支付</el-button>
            <el-button @click="voucherInput('QRSK')" v-if="rescueApplyOrder.returnStatusId==='50'" type="success" style="width: 100px;">确认收款</el-button>

            <el-dialog title="处理申请" :visible.sync="showApproveCheck" top="10vh">
                <el-form :model="approveCheck">
                    <el-form-item label="处理意见">
                        <el-input type="textarea" :rows="3" v-model="approveCheck.approveComments" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showApproveCheck = false">取 消</el-button>
                    <el-button type="primary" @click="auditOrder()">确 定</el-button>
                  </span>
            </el-dialog>

            <el-dialog title="凭证录入" :visible.sync="showPayCheck" top="10vh">
                <el-form v-if="voucherType==='ZF'">
                    <el-form-item label="是否垫付">
                        <el-radio v-model="ifAdvance" label="Y">是</el-radio>
                        <el-radio v-model="ifAdvance" label="N">否</el-radio>
                    </el-form-item>
                    <el-form-item label="垫付金额" v-if="ifAdvance==='Y'">
                        <el-input-number v-model="rescueAmount" controls-position="right" :precision="2" :step="0.01" :min="0" style="width: 200px" @change ="rescueAmountChange"></el-input-number>
                    </el-form-item>
                    <el-form-item label="上传凭证">
                        <el-upload
                                :action="uploadUrl"
                                list-type="picture-card"
                                :limit="10"
                                :on-exceed="handleExceed"
                                :on-preview="showVoucherImg"
                                :on-remove="handleRemove"
                                :file-list="voucherList"
                                :on-success="handleSuccess">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>

                <el-form v-if="voucherType==='QRSK'">
                    <el-form-item label="垫付金额">
                        <span>{{rescueApplyOrder.rescueAmount}}</span>
                    </el-form-item>
                    <el-form-item label="豁免金额">
                        <el-input-number v-model="exemptionAmount" controls-position="right" :precision="2" :step="0.01" :min="0" style="width: 200px" @change ="returnAmountCount"></el-input-number>
                    </el-form-item>
                    <el-form-item label="收款金额">
                        <span>{{returnAmount}}</span>
                    </el-form-item>
                    <el-form-item label="打款凭证" v-if="returnAmount>0">
                        <el-upload
                                :action="uploadUrl"
                                list-type="picture-card"
                                :limit="10"
                                :on-exceed="handleExceed"
                                :on-preview="showVoucherImg"
                                :on-remove="handleRemove"
                                :file-list="voucherList"
                                :on-success="handleSuccess">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="豁免凭证" v-if="exemptionAmount>0">
                        <el-upload
                                :action="uploadUrl"
                                list-type="picture-card"
                                :limit="10"
                                :on-exceed="handleExceed"
                                :on-preview="showVoucherImg"
                                :on-remove="handleExemptionRemove"
                                :file-list="exemptionVoucher"
                                :on-success="handleExemptionSuccess">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="showPayCheck = false">取 消</el-button>
                    <el-button type="primary" @click="payVoucherCheck()">确 定</el-button>
                  </span>
            </el-dialog>
        </div>




    </div>
</template>

<script>
  import { getOrderDetail,auditOrRejectOrder,paymentCallBack ,returnCallBack} from '@/api/rescueApplyOrderApi'
  import {formatDate} from '@/utils/dateUtil'

  export default {
    name: 'detail',
    data(){
      return {
        uploadUrl:process.env.BASE_API + '/orderTruckImage/upload',
        rescueApplyOrderId:'',
        rescueApplyOrder:{},
        //事故认定书
        accidentConfirmation:[],
        //医生开具证明
        medicalCertificate:[],
        //垫付凭证
        advancesVouchers:[],
        //还款凭证
        paymentVoucher:[],
        //免赔资料
        negativeClearance:[],
        logList:[],
        activeNames:['1'],
        baseUrl: process.env.IMG_BASE_URL,
        dialogImgFormVisible:false,
        showApproveCheck:false,
        approveCheck:{},
        imgUrl:'',
        approveType:'',
        showPayCheck:false,
        payCheck:{},
        //打款凭证
        voucherList:[],
        //免赔凭证
        exemptionVoucher:[],
        rescueAmount:0,
        ifAdvance:'',
        voucherType:'',
        exemptionAmount: 0,
        returnAmount:0,
      }
    },
    methods:{
      getOrderDetail(){
        getOrderDetail(this.rescueApplyOrderId).then(res=>{
          if(!res.hasError){
            const {result:{imageList,logList}} = res;
            const rescueApplyOrder = res.result;
            let accidentConfirmation =[],medicalCertificate=[],advancesVouchers=[],paymentVoucher=[],negativeClearance=[],c_logList=[];
            if(imageList){
              imageList.forEach(item=>{
                if(item.imageTypeId==='ACCIDENT_CONFIRMATION'){
                  accidentConfirmation.push(item);
                }
                if(item.imageTypeId==='MEDICAL_CERTIFICATE'){
                  medicalCertificate.push(item);
                }
                if(item.imageTypeId==='ADVANCES_VOUCHERS'){
                  advancesVouchers.push(item);
                }
                if(item.imageTypeId==='PAYMENT_VOUCHER'){
                  paymentVoucher.push(item);
                }
                if(item.imageTypeId==='NEGATIVE_CLEARANCE'){
                  negativeClearance.push(item);
                }
              })
            }
            logList.forEach(item=>{
              c_logList.push({...item, optDate:formatDate(item.optDate,'yyyy-MM-dd')});
            });
            this.logList = c_logList;
            this.rescueApplyOrder = {...rescueApplyOrder,applyDate:formatDate(rescueApplyOrder.applyDate,'yyyy-MM-dd')};
            this.accidentConfirmation = accidentConfirmation;
            this.medicalCertificate = medicalCertificate;
            this.advancesVouchers = advancesVouchers;
            this.paymentVoucher = paymentVoucher;
            this.negativeClearance = negativeClearance;
            this.rescueAmount = rescueApplyOrder.rescueAmount;
            this.returnAmount = rescueApplyOrder.rescueAmount;
          }
        })
      },
      handleChange(event){
        this.activeNames = event;
      },
      showImg(url) {
        this.dialogImgFormVisible = true;
        this.imgUrl = this.baseUrl+url;
      },
      checkApprove(opt){
        this.approveType = opt;
        this.showApproveCheck = true;
      },
      auditOrder(){
        let formData ={
          id:this.rescueApplyOrderId,
          operation:this.approveType,
          comments:this.approveCheck.approveComments,
        };
        auditOrRejectOrder(formData).then(res=>{
            if(!res.hasError){
              this.$message.success("操作成功！");
              this.getOrderDetail();
            }
        });
        this.showApproveCheck = false;
        this.getOrderDetail();
      },
      handleExceed(){
        this.$message.warning("最多上传10个文件！");
      },
      handleRemove(event) {
        const { url } = event
        let imgList = []
        this.voucherList.forEach(voucher => {
          if (voucher.url !== url) {
            imgList.push(voucher);
          }
        })
        this.voucherList = imgList;
      },
      handleExemptionRemove(event){
        const { url } = event
        let imgList = []
        this.exemptionVoucher.forEach(voucher => {
          if (voucher.url !== url) {
            imgList.push(voucher);
          }
        })
        this.exemptionVoucher = imgList;
      },
      handleSuccess(res){
        let imgList = this.voucherList;
        if (this.rescueApplyOrder.rescueStatusId === '30') {
          imgList.push({url: this.baseUrl+res.data,imageUrl:res.data,imageTypeId:'ADVANCES_VOUCHERS'});
        }else if(this.rescueApplyOrder.returnStatusId === '50'){
          imgList.push({url: this.baseUrl+res.data,imageUrl:res.data,imageTypeId:'PAYMENT_VOUCHER'});
        }
        this.voucherList = imgList;
      },
      handleExemptionSuccess(res){
        let imgList = this.exemptionVoucher;
        imgList.push({url: this.baseUrl+res.data,imageUrl:res.data,imageTypeId:'NEGATIVE_CLEARANCE'});
        this.exemptionVoucher = imgList;
      },
      showVoucherImg(event) {
        const { url } = event
        this.dialogImgFormVisible = true
        this.imgUrl = url
      },
      voucherInput(event){
        this.showPayCheck = true;
        this.voucherType = event;
      },
      rescueAmountChange(currentValue){
        if(!currentValue){
          this.rescueAmount = 0;
        }else{
          this.rescueAmount = parseFloat(currentValue.toFixed(2));
        }
      },
      returnAmountCount(currentValue){
        if(!currentValue){
          this.exemptionAmount = 0;
        }else if(currentValue > this.rescueAmount){
          this.$message.error('豁免金额不能大于垫付金额')
          this.exemptionAmount = this.rescueAmount;
        }else{
          this.exemptionAmount = parseFloat(currentValue.toFixed(2));
        }
        this.returnAmount = this.rescueAmount - this.exemptionAmount;
      },
      payVoucherCheck() {
        //支付回调
        if (this.voucherType === 'ZF') {
          if (this.rescueAmount === 0) {
            this.$message.error('垫付金额不能为0')
            return false
          }
          if (this.rescueAmount > 0 && this.voucherList.length === 0) {
            this.$message.error('上传垫付凭证数量不能为0')
            return false
          }
          let formData = {
            id: this.rescueApplyOrderId,
            imageList: this.voucherList,
            rescueAmount: this.rescueAmount,
            ifAdvance: this.ifAdvance
          }
          paymentCallBack(formData).then(res => {
            if (!res.hasError) {
              this.$message.success('操作成功！')
              this.getOrderDetail()
            }
          })
        }
        //确认收款
        if (this.voucherType === 'QRSK') {
          if (this.returnAmount > 0 && this.voucherList.length === 0) {
            this.$message.error('上传打款凭证数量不能为0')
            return false
          }
          if (this.exemptionAmount > 0 && this.exemptionVoucher.length === 0) {
            this.$message.error('上传豁免凭证数量不能为0')
            return false
          }
          let formData = {
            id: this.rescueApplyOrderId,
            imageList: this.voucherList.concat(this.exemptionVoucher),
            exemptionAmount: this.exemptionAmount
          }
          returnCallBack(formData).then(res => {
            if (!res.hasError) {
              this.$message.success('操作成功！')
              this.getOrderDetail()
            }
          })
        }
        this.voucherList = []
        this.showPayCheck = false
      }
    },
    mounted() {
      let rescueApplyOrderId = sessionStorage.getItem('rescueApplyOrderId');
      this.rescueApplyOrderId = rescueApplyOrderId;
      this.getOrderDetail();
    }
  }
</script>

<style scoped>
    .image_div{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .image_item{
        margin: 10px;
        border: 2px solid #FFFFFF;
        height: 100px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .image_item img{
        width: 80px;
        height: 80px;
    }
    .btn_panel{
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

</style>
